<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">待办任务</h2>
      <button class="text-primary text-sm hover:underline" @click="viewAllTasks">全部任务</button>
    </div>
    <div class="divide-y divide-gray-100">
      <div class="p-3 hover:bg-gray-50 transition-colors" v-for="(task, index) in todoTasks" :key="index">
        <div class="flex items-start">
          <div class="mt-0.5 mr-3">
            <input 
              type="checkbox" 
              class="w-4 h-4 rounded text-primary focus:ring-primary" 
              v-model="task.completed"
              @change="handleTaskChange(task.id, task.completed)"
            >
          </div>
          <div class="flex-1">
            <div class="font-medium text-sm">{{ task.title }}</div>
            <div class="flex items-center mt-1 text-xs text-gray-500">
              <span class="flex items-center" :class="task.deadlineClass + ' mr-3'">
                <i class="fa fa-clock-o mr-1"></i> {{ task.deadlineText }}
              </span>
              <span>{{ task.type }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todoTasks: [
        {
          id: 1,
          title: '完成Q2季度资源扩容申请',
          deadlineText: '今天 18:00',
          deadlineClass: 'text-warning',
          type: '审批',
          completed: false
        },
        {
          id: 2,
          title: '安全漏洞修复确认',
          deadlineText: '明天 12:00',
          deadlineClass: 'text-primary',
          type: '运维',
          completed: false
        },
        {
          id: 3,
          title: '云服务器性能优化方案',
          deadlineText: '06-15',
          deadlineClass: 'text-gray-500',
          type: '优化',
          completed: false
        },
        {
          id: 4,
          title: '团队资源使用培训',
          deadlineText: '06-20',
          deadlineClass: 'text-gray-500',
          type: '培训',
          completed: true
        }
      ]
    };
  },
  methods: {
    viewAllTasks() {
      // 查看全部任务逻辑
      console.log('查看全部任务');
    },
    handleTaskChange(taskId, completed) {
      // 处理任务状态变更
      console.log(`任务 ${taskId} 状态变更为: ${completed ? '已完成' : '未完成'}`);
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}
.transition-colors {
  transition: all 0.2s ease;
}
.text-warning {
  color: #f59e0b;
}
.text-primary {
  color: #3b82f6;
}
.text-gray-500 {
  color: #6b7280;
}
</style>